<template>
    <div class="page">
        <el-table :data="list" v-loading="loading" class="w-full">
			<el-table-column prop="familyMemberName" label="姓名" />
			<el-table-column prop="serviceName" label="服务项目" />
			<el-table-column prop="createTime" label="下单时间" />
			<el-table-column prop="totalPrice" label="价格" />
			<el-table-column prop="orderStatus" label="订单状态">
                <template #default="{row}">
                    <el-tag type="info">{{ USER_ORDER_STATUS_MAP[row.orderStatus]?.label || '' }}</el-tag>
                </template>
            </el-table-column>
			<el-table-column prop="orderNo" label="订单编号" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{row}">
					<el-button @click="orderDetail(row.id)" type="primary" link>订单详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="flex justify-end mt-6">
            <el-pagination 
            layout="prev, pager, next" 
            :total="pagination.total" 
            v-model:page-size="pagination.limit" 
            v-model:current-page="pagination.page"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';import { USER_ORDER_STATUS_MAP } from '@/utils/constants';
import request from '@/utils/request';
import type { AnyObj } from '@/utils/type';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const pagination = reactive({
	total: 0,
	limit: 20,
	page: 1
});

const list = ref<AnyObj[]>([]);

const loading = ref(false);

const getTableData = async () => {
	loading.value = true;
	try {
		const { records, total } = await request({
			url: '/api/sys/customer/one/orderList',
			method: 'post',
			contentTypeIsForm: false,
			data: {
				page: pagination.page,
				limit: pagination.limit,
                customerId: route.params.userId
			},
			errorToast: true,
			showLoading: {}
		});
		list.value = records;
		pagination.total = total;
	} catch (error) {
		
	} finally {
		loading.value = false;
	}
};

const orderDetail = (orderId: number) => {
    router.push({
        name: 'OrderDetail',
        params: {
            orderId
        }
    });
};

onMounted(() => {
    getTableData();
});
</script>

<style lang="scss" scoped>

</style>